<!DOCTYPE html>
<html>
<head>
  <title>RGB颜色查询对照表</title>
  <style>
    *{
        margin: 0 auto;
    }
    body{
      background-color: #68768a;
    }
	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width:5px;
	}
	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
		border-radius:10px;
	}
	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius:10px;
		background:rgba(0,0,0,0.1);
		-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background:rgba(30, 144, 255,0.4);
	}
    .main{
      position: relative;
      top: 30px;
      width: 90%;
      text-align: center;
    }
    .RGB转HEX{
      margin-bottom: 30px;
    }
    label{
      color: #00bfff;
      font-size: 1.5em;
    }
    #色值转换 input{
      width: 300px;
      height: 30px;
      padding: 10px;
      font-size: 18px;
      border-radius: 10px;
      border: none;
    }
    .color-block {
      display: inline-block;
      width: 48px;
      height: 48px;
      border: 1px solid #1e90ff;
      vertical-align: top;
    }
    #颜色选择器{
      margin-top: 40px;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        width: 250px;
        float: left;
        margin-left: 35%;
    }
    li{
        list-style: none;
        width: 20px;
        height: 20px;
        margin: 2.5px;
        cursor: pointer;
    }
    .颜色选择器{
      float: left;
      margin-left: 20px;
    }
    #colorPicker{
      height: 48px;
      vertical-align: top;
      display: inline-block;
    }
    #colorInputRgb, #colorInputHex{
      width: 150px;
      height: 30px;
      padding: 10px;
      font-size: 18px;
      border-radius: 10px;
      border: none;
      display: inherit;
      margin-top: 20px;
    }
	#颜色大全{
		margin-top: 450px;
	}
	td:nth-child(odd) {
	  height:30px;
	  width:30px;
	}
	td:nth-child(even) {
	  color: #005caf;
	  font: 12px/18px Verdana;
	}
	td:hover{
	  cursor: pointer
	}
  </style>
  
  <style type="text/css">
    /*----------------------------------------- 设置消息弹框的样式 --------------------------------------*/
    /*预定义样式，通过js动态生成dom时，加上指定类名*/
    .dpn-message {
      font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
      font-size: 12px;
      z-index: 99999;
    }
    
    .dpn-message {
      box-sizing: border-box;
      position: fixed;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99999;
      padding: 15px;
      padding-right: 32px;
      min-width: 20%;
      max-width: 50%;
      border-radius: 4px;
      transition: top .3s;
    }
    
    /*info 消息*/
    .dpn-message.dpn-info {
      background: #EDF2FC;
      border: 1px solid #EBEEF5;
      color: #909399;
    }
    
    /*success消息*/
    .dpn-message.dpn-success {
      background: #f0f9eb;
      border: 1px solid #54f006;
      color: #67C23A;
    }
    
    /*error消息*/
    .dpn-message.dpn-error {
      background: #fef0f0;
      border: 1px solid #fde2e2;
      color: #F56C6C;
    }
    /*warning消息*/
    
    .dpn-message.dpn-warning {
      background: #fdf6ec;
      border: 1px solid #faecd8;
      color: #E6A23C;
    }
    
    .dpn-message .dpn-close {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      font-style: normal;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="main">
    <div id="色值转换">
      <div class="RGB转HEX">
        <label>RGB转HEX：</label>
        <input type="text" id="rgbInput" onblur="convertRGBtoHEX()" oninput="convertRGBtoHEX()" placeholder="255,255,255"/>
        <div id="rgbToHexColor" class="color-block"></div>
      </div>
  
      <div class="HEX转RGB">
        <label>HEX转RGB：</label>
        <input type="text" id="hexInput" onblur="convertHEXtoRGB()" oninput="convertHEXtoRGB()" placeholder="000 或 000000"/>
        <div id="hexToRgbColor" class="color-block"></div>
      </div>
    </div>
  
    <div id="颜色选择器">
        <ul id="color-ur"></ul>
        <div class="颜色选择器">
          <input type="color" id="colorPicker" onchange="updateColorPicker()" />
          <input type="text" id="colorInputRgb" oninput="updateColorInputRgb()" placeholder="rgb颜色值"/>
          <input type="text" id="colorInputHex" oninput="updateColorInputHex()" placeholder="hex颜色值"/>
        </div>
    </div>
	
	<div id="颜色大全">
		<table cellspacing="3">
			<tbody>
				<tr>
					<td bgcolor="#ffffff"></td>
					<td>#FFFFFF</td>
					<td bgcolor="#fffff0"></td>
					<td>#FFFFF0</td>
					<td bgcolor="#ffffe0"></td>
					<td>#FFFFE0</td>
					<td bgcolor="#ffff00"></td>
					<td>#FFFF00</td>
					<td bgcolor="#fffafa"></td>
					<td>#FFFAFA</td>
					<td bgcolor="#fffaf0"></td>
					<td>#FFFAF0</td>
					<td bgcolor="#fffacd"></td>
					<td>#FFFACD</td>
					<td bgcolor="#fff8dc"></td>
					<td>#FFF8DC</td>
					<td bgcolor="#fff68f"></td>
					<td>#FFF68F</td>
					<td bgcolor="#fff5ee"></td>
					<td>#FFF5EE</td>
					<td bgcolor="#fff0f5"></td>
					<td>#FFF0F5</td>
					<td bgcolor="#ffefdb"></td>
					<td>#FFEFDB</td>
				</tr>
				<tr>
					<td bgcolor="#ffefd5"></td>
					<td>#FFEFD5</td>
					<td bgcolor="#ffec8b"></td>
					<td>#FFEC8B</td>
					<td bgcolor="#ffebcd"></td>
					<td>#FFEBCD</td>
					<td bgcolor="#ffe7ba"></td>
					<td>#FFE7BA</td>
					<td bgcolor="#ffe4e1"></td>
					<td>#FFE4E1</td>
					<td bgcolor="#ffe4c4"></td>
					<td>#FFE4C4</td>
					<td bgcolor="#ffe4b5"></td>
					<td>#FFE4B5</td>
					<td bgcolor="#ffe1ff"></td>
					<td>#FFE1FF</td>
					<td bgcolor="#ffdead"></td>
					<td>#FFDEAD</td>
					<td bgcolor="#ffdab9"></td>
					<td>#FFDAB9</td>
					<td bgcolor="#ffd700"></td>
					<td>#FFD700</td>
					<td bgcolor="#ffd39b"></td>
					<td>#FFD39B</td>
				</tr>
				<tr>
					<td bgcolor="#ffc1c1"></td>
					<td>#FFC1C1</td>
					<td bgcolor="#ffc125"></td>
					<td>#FFC125</td>
					<td bgcolor="#ffc0cb"></td>
					<td>#FFC0CB</td>
					<td bgcolor="#ffbbff"></td>
					<td>#FFBBFF</td>
					<td bgcolor="#ffb90f"></td>
					<td>#FFB90F</td>
					<td bgcolor="#ffb6c1"></td>
					<td>#FFB6C1</td>
					<td bgcolor="#ffb5c5"></td>
					<td>#FFB5C5</td>
					<td bgcolor="#ffaeb9"></td>
					<td>#FFAEB9</td>
					<td bgcolor="#ffa54f"></td>
					<td>#FFA54F</td>
					<td bgcolor="#ffa500"></td>
					<td>#FFA500</td>
					<td bgcolor="#ffa07a"></td>
					<td>#FFA07A</td>
					<td bgcolor="#ff8c69"></td>
					<td>#FF8C69</td>
				</tr>
				<tr>
					<td bgcolor="#ff8c00"></td>
					<td>#FF8C00</td>
					<td bgcolor="#ff83fa"></td>
					<td>#FF83FA</td>
					<td bgcolor="#ff82ab"></td>
					<td>#FF82AB</td>
					<td bgcolor="#ff8247"></td>
					<td>#FF8247</td>
					<td bgcolor="#ff7f50"></td>
					<td>#FF7F50</td>
					<td bgcolor="#ff7f24"></td>
					<td>#FF7F24</td>
					<td bgcolor="#ff7f00"></td>
					<td>#FF7F00</td>
					<td bgcolor="#ff7256"></td>
					<td>#FF7256</td>
					<td bgcolor="#ff6eb4"></td>
					<td>#FF6EB4</td>
					<td bgcolor="#ff6a6a"></td>
					<td>#FF6A6A</td>
					<td bgcolor="#ff69b4"></td>
					<td>#FF69B4</td>
					<td bgcolor="#ff6347"></td>
					<td>#FF6347</td>
				</tr>
				<tr>
					<td bgcolor="#ff4500"></td>
					<td>#FF4500</td>
					<td bgcolor="#ff4040"></td>
					<td>#FF4040</td>
					<td bgcolor="#ff3e96"></td>
					<td>#FF3E96</td>
					<td bgcolor="#ff34b3"></td>
					<td>#FF34B3</td>
					<td bgcolor="#ff3030"></td>
					<td>#FF3030</td>
					<td bgcolor="#ff1493"></td>
					<td>#FF1493</td>
					<td bgcolor="#ff00ff"></td>
					<td>#FF00FF</td>
					<td bgcolor="#ff0000"></td>
					<td>#FF0000</td>
					<td bgcolor="#fdf5e6"></td>
					<td>#FDF5E6</td>
					<td bgcolor="#fcfcfc"></td>
					<td>#FCFCFC</td>
					<td bgcolor="#fafafa"></td>
					<td>#FAFAFA</td>
					<td bgcolor="#fafad2"></td>
					<td>#FAFAD2</td>
				</tr>
				<tr>
					<td bgcolor="#faf0e6"></td>
					<td>#FAF0E6</td>
					<td bgcolor="#faebd7"></td>
					<td>#FAEBD7</td>
					<td bgcolor="#fa8072"></td>
					<td>#FA8072</td>
					<td bgcolor="#f8f8ff"></td>
					<td>#F8F8FF</td>
					<td bgcolor="#f7f7f7"></td>
					<td>#F7F7F7</td>
					<td bgcolor="#f5fffa"></td>
					<td>#F5FFFA</td>
					<td bgcolor="#f5f5f5"></td>
					<td>#F5F5F5</td>
					<td bgcolor="#f5f5dc"></td>
					<td>#F5F5DC</td>
					<td bgcolor="#f5deb3"></td>
					<td>#F5DEB3</td>
					<td bgcolor="#f4f4f4"></td>
					<td>#F4F4F4</td>
					<td bgcolor="#f4a460"></td>
					<td>#F4A460</td>
					<td bgcolor="#f2f2f2"></td>
					<td>#F2F2F2</td>
				</tr>
				<tr>
					<td bgcolor="#f0ffff"></td>
					<td>#F0FFFF</td>
					<td bgcolor="#f0fff0"></td>
					<td>#F0FFF0</td>
					<td bgcolor="#f0f8ff"></td>
					<td>#F0F8FF</td>
					<td bgcolor="#f0f0f0"></td>
					<td>#F0F0F0</td>
					<td bgcolor="#f0e68c"></td>
					<td>#F0E68C</td>
					<td bgcolor="#f08080"></td>
					<td>#F08080</td>
					<td bgcolor="#eeeee0"></td>
					<td>#EEEEE0</td>
					<td bgcolor="#eeeed1"></td>
					<td>#EEEED1</td>
					<td bgcolor="#eeee00"></td>
					<td>#EEEE00</td>
					<td bgcolor="#eee9e9"></td>
					<td>#EEE9E9</td>
					<td bgcolor="#eee9bf"></td>
					<td>#EEE9BF</td>
					<td bgcolor="#eee8cd"></td>
					<td>#EEE8CD</td>
				</tr>
				<tr>
					<td bgcolor="#eee8aa"></td>
					<td>#EEE8AA</td>
					<td bgcolor="#eee685"></td>
					<td>#EEE685</td>
					<td bgcolor="#eee5de"></td>
					<td>#EEE5DE</td>
					<td bgcolor="#eee0e5"></td>
					<td>#EEE0E5</td>
					<td bgcolor="#eedfcc"></td>
					<td>#EEDFCC</td>
					<td bgcolor="#eedc82"></td>
					<td>#EEDC82</td>
					<td bgcolor="#eed8ae"></td>
					<td>#EED8AE</td>
					<td bgcolor="#eed5d2"></td>
					<td>#EED5D2</td>
					<td bgcolor="#eed5b7"></td>
					<td>#EED5B7</td>
					<td bgcolor="#eed2ee"></td>
					<td>#EED2EE</td>
					<td bgcolor="#eecfa1"></td>
					<td>#EECFA1</td>
					<td bgcolor="#eecbad"></td>
					<td>#EECBAD</td>
				</tr>
				<tr>
					<td bgcolor="#eec900"></td>
					<td>#EEC900</td>
					<td bgcolor="#eec591"></td>
					<td>#EEC591</td>
					<td bgcolor="#eeb4b4"></td>
					<td>#EEB4B4</td>
					<td bgcolor="#eeb422"></td>
					<td>#EEB422</td>
					<td bgcolor="#eeaeee"></td>
					<td>#EEAEEE</td>
					<td bgcolor="#eead0e"></td>
					<td>#EEAD0E</td>
					<td bgcolor="#eea9b8"></td>
					<td>#EEA9B8</td>
					<td bgcolor="#eea2ad"></td>
					<td>#EEA2AD</td>
					<td bgcolor="#ee9a49"></td>
					<td>#EE9A49</td>
					<td bgcolor="#ee9a00"></td>
					<td>#EE9A00</td>
					<td bgcolor="#ee9572"></td>
					<td>#EE9572</td>
					<td bgcolor="#ee82ee"></td>
					<td>#EE82EE</td>
				</tr>
				<tr>
					<td bgcolor="#ee8262"></td>
					<td>#EE8262</td>
					<td bgcolor="#ee7ae9"></td>
					<td>#EE7AE9</td>
					<td bgcolor="#ee799f"></td>
					<td>#EE799F</td>
					<td bgcolor="#ee7942"></td>
					<td>#EE7942</td>
					<td bgcolor="#ee7621"></td>
					<td>#EE7621</td>
					<td bgcolor="#ee7600"></td>
					<td>#EE7600</td>
					<td bgcolor="#ee6aa7"></td>
					<td>#EE6AA7</td>
					<td bgcolor="#ee6a50"></td>
					<td>#EE6A50</td>
					<td bgcolor="#ee6363"></td>
					<td>#EE6363</td>
					<td bgcolor="#ee5c42"></td>
					<td>#EE5C42</td>
					<td bgcolor="#ee4000"></td>
					<td>#EE4000</td>
					<td bgcolor="#ee3b3b"></td>
					<td>#EE3B3B</td>
				</tr>
				<tr>
					<td bgcolor="#ee3a8c"></td>
					<td>#EE3A8C</td>
					<td bgcolor="#ee30a7"></td>
					<td>#EE30A7</td>
					<td bgcolor="#ee2c2c"></td>
					<td>#EE2C2C</td>
					<td bgcolor="#ee1289"></td>
					<td>#EE1289</td>
					<td bgcolor="#ee00ee"></td>
					<td>#EE00EE</td>
					<td bgcolor="#ee0000"></td>
					<td>#EE0000</td>
					<td bgcolor="#ededed"></td>
					<td>#EDEDED</td>
					<td bgcolor="#ebebeb"></td>
					<td>#EBEBEB</td>
					<td bgcolor="#eaeaea"></td>
					<td>#EAEAEA</td>
					<td bgcolor="#e9967a"></td>
					<td>#E9967A</td>
					<td bgcolor="#e8e8e8"></td>
					<td>#E8E8E8</td>
					<td bgcolor="#e6e6fa"></td>
					<td>#E6E6FA</td>
				</tr>
				<tr>
					<td bgcolor="#e5e5e5"></td>
					<td>#E5E5E5</td>
					<td bgcolor="#e3e3e3"></td>
					<td>#E3E3E3</td>
					<td bgcolor="#e0ffff"></td>
					<td>#E0FFFF</td>
					<td bgcolor="#e0eeee"></td>
					<td>#E0EEEE</td>
					<td bgcolor="#e0eee0"></td>
					<td>#E0EEE0</td>
					<td bgcolor="#e0e0e0"></td>
					<td>#E0E0E0</td>
					<td bgcolor="#e066ff"></td>
					<td>#E066FF</td>
					<td bgcolor="#dedede"></td>
					<td>#DEDEDE</td>
					<td bgcolor="#deb887"></td>
					<td>#DEB887</td>
					<td bgcolor="#dda0dd"></td>
					<td>#DDA0DD</td>
					<td bgcolor="#dcdcdc"></td>
					<td>#DCDCDC</td>
					<td bgcolor="#dc143c"></td>
					<td>#DC143C</td>
				</tr>
				<tr>
					<td bgcolor="#dbdbdb"></td>
					<td>#DBDBDB</td>
					<td bgcolor="#db7093"></td>
					<td>#DB7093</td>
					<td bgcolor="#daa520"></td>
					<td>#DAA520</td>
					<td bgcolor="#da70d6"></td>
					<td>#DA70D6</td>
					<td bgcolor="#d9d9d9"></td>
					<td>#D9D9D9</td>
					<td bgcolor="#d8bfd8"></td>
					<td>#D8BFD8</td>
					<td bgcolor="#d6d6d6"></td>
					<td>#D6D6D6</td>
					<td bgcolor="#d4d4d4"></td>
					<td>#D4D4D4</td>
					<td bgcolor="#d3d3d3"></td>
					<td>#D3D3D3</td>
					<td bgcolor="#d2b48c"></td>
					<td>#D2B48C</td>
					<td bgcolor="#d2691e"></td>
					<td>#D2691E</td>
					<td bgcolor="#d1eeee"></td>
					<td>#D1EEEE</td>
				</tr>
				<tr>
					<td bgcolor="#d1d1d1"></td>
					<td>#D1D1D1</td>
					<td bgcolor="#d15fee"></td>
					<td>#D15FEE</td>
					<td bgcolor="#d02090"></td>
					<td>#D02090</td>
					<td bgcolor="#cfcfcf"></td>
					<td>#CFCFCF</td>
					<td bgcolor="#cdcdc1"></td>
					<td>#CDCDC1</td>
					<td bgcolor="#cdcdb4"></td>
					<td>#CDCDB4</td>
					<td bgcolor="#cdcd00"></td>
					<td>#CDCD00</td>
					<td bgcolor="#cdc9c9"></td>
					<td>#CDC9C9</td>
					<td bgcolor="#cdc9a5"></td>
					<td>#CDC9A5</td>
					<td bgcolor="#cdc8b1"></td>
					<td>#CDC8B1</td>
					<td bgcolor="#cdc673"></td>
					<td>#CDC673</td>
					<td bgcolor="#cdc5bf"></td>
					<td>#CDC5BF</td>
				</tr>
				<tr>
					<td bgcolor="#cdc1c5"></td>
					<td>#CDC1C5</td>
					<td bgcolor="#cdc0b0"></td>
					<td>#CDC0B0</td>
					<td bgcolor="#cdbe70"></td>
					<td>#CDBE70</td>
					<td bgcolor="#cdba96"></td>
					<td>#CDBA96</td>
					<td bgcolor="#cdb7b5"></td>
					<td>#CDB7B5</td>
					<td bgcolor="#cdb79e"></td>
					<td>#CDB79E</td>
					<td bgcolor="#cdb5cd"></td>
					<td>#CDB5CD</td>
					<td bgcolor="#cdb38b"></td>
					<td>#CDB38B</td>
					<td bgcolor="#cdaf95"></td>
					<td>#CDAF95</td>
					<td bgcolor="#cdad00"></td>
					<td>#CDAD00</td>
					<td bgcolor="#cdaa7d"></td>
					<td>#CDAA7D</td>
					<td bgcolor="#cd9b9b"></td>
					<td>#CD9B9B</td>
				</tr>
				<tr>
					<td bgcolor="#cd9b1d"></td>
					<td>#CD9B1D</td>
					<td bgcolor="#cd96cd"></td>
					<td>#CD96CD</td>
					<td bgcolor="#cd950c"></td>
					<td>#CD950C</td>
					<td bgcolor="#cd919e"></td>
					<td>#CD919E</td>
					<td bgcolor="#cd8c95"></td>
					<td>#CD8C95</td>
					<td bgcolor="#cd853f"></td>
					<td>#CD853F</td>
					<td bgcolor="#cd8500"></td>
					<td>#CD8500</td>
					<td bgcolor="#cd8162"></td>
					<td>#CD8162</td>
					<td bgcolor="#cd7054"></td>
					<td>#CD7054</td>
					<td bgcolor="#cd69c9"></td>
					<td>#CD69C9</td>
					<td bgcolor="#cd6889"></td>
					<td>#CD6889</td>
					<td bgcolor="#cd6839"></td>
					<td>#CD6839</td>
				</tr>
				<tr>
					<td bgcolor="#cd661d"></td>
					<td>#CD661D</td>
					<td bgcolor="#cd6600"></td>
					<td>#CD6600</td>
					<td bgcolor="#cd6090"></td>
					<td>#CD6090</td>
					<td bgcolor="#cd5c5c"></td>
					<td>#CD5C5C</td>
					<td bgcolor="#cd5b45"></td>
					<td>#CD5B45</td>
					<td bgcolor="#cd5555"></td>
					<td>#CD5555</td>
					<td bgcolor="#cd4f39"></td>
					<td>#CD4F39</td>
					<td bgcolor="#cd3700"></td>
					<td>#CD3700</td>
					<td bgcolor="#cd3333"></td>
					<td>#CD3333</td>
					<td bgcolor="#cd3278"></td>
					<td>#CD3278</td>
					<td bgcolor="#cd2990"></td>
					<td>#CD2990</td>
					<td bgcolor="#cd2626"></td>
					<td>#CD2626</td>
				</tr>
				<tr>
					<td bgcolor="#cd1076"></td>
					<td>#CD1076</td>
					<td bgcolor="#cd00cd"></td>
					<td>#CD00CD</td>
					<td bgcolor="#cd0000"></td>
					<td>#CD0000</td>
					<td bgcolor="#cccccc"></td>
					<td>#CCCCCC</td>
					<td bgcolor="#caff70"></td>
					<td>#CAFF70</td>
					<td bgcolor="#cae1ff"></td>
					<td>#CAE1FF</td>
					<td bgcolor="#c9c9c9"></td>
					<td>#C9C9C9</td>
					<td bgcolor="#c7c7c7"></td>
					<td>#C7C7C7</td>
					<td bgcolor="#c71585"></td>
					<td>#C71585</td>
					<td bgcolor="#c6e2ff"></td>
					<td>#C6E2FF</td>
					<td bgcolor="#c67171"></td>
					<td>#C67171</td>
					<td bgcolor="#c5c1aa"></td>
					<td>#C5C1AA</td>
				</tr>
				<tr>
					<td bgcolor="#c4c4c4"></td>
					<td>#C4C4C4</td>
					<td bgcolor="#c2c2c2"></td>
					<td>#C2C2C2</td>
					<td bgcolor="#c1ffc1"></td>
					<td>#C1FFC1</td>
					<td bgcolor="#c1cdcd"></td>
					<td>#C1CDCD</td>
					<td bgcolor="#c1cdc1"></td>
					<td>#C1CDC1</td>
					<td bgcolor="#c1c1c1"></td>
					<td>#C1C1C1</td>
					<td bgcolor="#c0ff3e"></td>
					<td>#C0FF3E</td>
					<td bgcolor="#bfefff"></td>
					<td>#BFEFFF</td>
					<td bgcolor="#bfbfbf"></td>
					<td>#BFBFBF</td>
					<td bgcolor="#bf3eff"></td>
					<td>#BF3EFF</td>
					<td bgcolor="#bebebe"></td>
					<td>#BEBEBE</td>
					<td bgcolor="#bdbdbd"></td>
					<td>#BDBDBD</td>
				</tr>
				<tr>
					<td bgcolor="#bdb76b"></td>
					<td>#BDB76B</td>
					<td bgcolor="#bcee68"></td>
					<td>#BCEE68</td>
					<td bgcolor="#bcd2ee"></td>
					<td>#BCD2EE</td>
					<td bgcolor="#bc8f8f"></td>
					<td>#BC8F8F</td>
					<td bgcolor="#bbffff"></td>
					<td>#BBFFFF</td>
					<td bgcolor="#bababa"></td>
					<td>#BABABA</td>
					<td bgcolor="#ba55d3"></td>
					<td>#BA55D3</td>
					<td bgcolor="#b9d3ee"></td>
					<td>#B9D3EE</td>
					<td bgcolor="#b8b8b8"></td>
					<td>#B8B8B8</td>
					<td bgcolor="#b8860b"></td>
					<td>#B8860B</td>
					<td bgcolor="#b7b7b7"></td>
					<td>#B7B7B7</td>
					<td bgcolor="#b5b5b5"></td>
					<td>#B5B5B5</td>
				</tr>
				<tr>
					<td bgcolor="#b4eeb4"></td>
					<td>#B4EEB4</td>
					<td bgcolor="#b4cdcd"></td>
					<td>#B4CDCD</td>
					<td bgcolor="#b452cd"></td>
					<td>#B452CD</td>
					<td bgcolor="#b3ee3a"></td>
					<td>#B3EE3A</td>
					<td bgcolor="#b3b3b3"></td>
					<td>#B3B3B3</td>
					<td bgcolor="#b2dfee"></td>
					<td>#B2DFEE</td>
					<td bgcolor="#b23aee"></td>
					<td>#B23AEE</td>
					<td bgcolor="#b22222"></td>
					<td>#B22222</td>
					<td bgcolor="#b0e2ff"></td>
					<td>#B0E2FF</td>
					<td bgcolor="#b0e0e6"></td>
					<td>#B0E0E6</td>
					<td bgcolor="#b0c4de"></td>
					<td>#B0C4DE</td>
					<td bgcolor="#b0b0b0"></td>
					<td>#B0B0B0</td>
				</tr>
				<tr>
					<td bgcolor="#b03060"></td>
					<td>#B03060</td>
					<td bgcolor="#aeeeee"></td>
					<td>#AEEEEE</td>
					<td bgcolor="#adff2f"></td>
					<td>#ADFF2F</td>
					<td bgcolor="#add8e6"></td>
					<td>#ADD8E6</td>
					<td bgcolor="#adadad"></td>
					<td>#ADADAD</td>
					<td bgcolor="#ababab"></td>
					<td>#ABABAB</td>
					<td bgcolor="#ab82ff"></td>
					<td>#AB82FF</td>
					<td bgcolor="#aaaaaa"></td>
					<td>#AAAAAA</td>
					<td bgcolor="#a9a9a9"></td>
					<td>#A9A9A9</td>
					<td bgcolor="#a8a8a8"></td>
					<td>#A8A8A8</td>
					<td bgcolor="#a6a6a6"></td>
					<td>#A6A6A6</td>
					<td bgcolor="#a52a2a"></td>
					<td>#A52A2A</td>
				</tr>
				<tr>
					<td bgcolor="#a4d3ee"></td>
					<td>#A4D3EE</td>
					<td bgcolor="#a3a3a3"></td>
					<td>#A3A3A3</td>
					<td bgcolor="#a2cd5a"></td>
					<td>#A2CD5A</td>
					<td bgcolor="#a2b5cd"></td>
					<td>#A2B5CD</td>
					<td bgcolor="#a1a1a1"></td>
					<td>#A1A1A1</td>
					<td bgcolor="#a0522d"></td>
					<td>#A0522D</td>
					<td bgcolor="#a020f0"></td>
					<td>#A020F0</td>
					<td bgcolor="#9fb6cd"></td>
					<td>#9FB6CD</td>
					<td bgcolor="#9f79ee"></td>
					<td>#9F79EE</td>
					<td bgcolor="#9e9e9e"></td>
					<td>#9E9E9E</td>
					<td bgcolor="#9c9c9c"></td>
					<td>#9C9C9C</td>
					<td bgcolor="#9bcd9b"></td>
					<td>#9BCD9B</td>
				</tr>
				<tr>
					<td bgcolor="#9b30ff"></td>
					<td>#9B30FF</td>
					<td bgcolor="#9aff9a"></td>
					<td>#9AFF9A</td>
					<td bgcolor="#9acd32"></td>
					<td>#9ACD32</td>
					<td bgcolor="#9ac0cd"></td>
					<td>#9AC0CD</td>
					<td bgcolor="#9a32cd"></td>
					<td>#9A32CD</td>
					<td bgcolor="#999999"></td>
					<td>#999999</td>
					<td bgcolor="#9932cc"></td>
					<td>#9932CC</td>
					<td bgcolor="#98fb98"></td>
					<td>#98FB98</td>
					<td bgcolor="#98f5ff"></td>
					<td>#98F5FF</td>
					<td bgcolor="#97ffff"></td>
					<td>#97FFFF</td>
					<td bgcolor="#96cdcd"></td>
					<td>#96CDCD</td>
					<td bgcolor="#969696"></td>
					<td>#969696</td>
				</tr>
				<tr>
					<td bgcolor="#949494"></td>
					<td>#949494</td>
					<td bgcolor="#9400d3"></td>
					<td>#9400D3</td>
					<td bgcolor="#9370db"></td>
					<td>#9370DB</td>
					<td bgcolor="#919191"></td>
					<td>#919191</td>
					<td bgcolor="#912cee"></td>
					<td>#912CEE</td>
					<td bgcolor="#90ee90"></td>
					<td>#90EE90</td>
					<td bgcolor="#8fbc8f"></td>
					<td>#8FBC8F</td>
					<td bgcolor="#8f8f8f"></td>
					<td>#8F8F8F</td>
					<td bgcolor="#8ee5ee"></td>
					<td>#8EE5EE</td>
					<td bgcolor="#8e8e8e"></td>
					<td>#8E8E8E</td>
					<td bgcolor="#8e8e38"></td>
					<td>#8E8E38</td>
					<td bgcolor="#8e388e"></td>
					<td>#8E388E</td>
				</tr>
				<tr>
					<td bgcolor="#8deeee"></td>
					<td>#8DEEEE</td>
					<td bgcolor="#8db6cd"></td>
					<td>#8DB6CD</td>
					<td bgcolor="#8c8c8c"></td>
					<td>#8C8C8C</td>
					<td bgcolor="#8b8b83"></td>
					<td>#8B8B83</td>
					<td bgcolor="#8b8b7a"></td>
					<td>#8B8B7A</td>
					<td bgcolor="#8b8b00"></td>
					<td>#8B8B00</td>
					<td bgcolor="#8b8989"></td>
					<td>#8B8989</td>
					<td bgcolor="#8b8970"></td>
					<td>#8B8970</td>
					<td bgcolor="#8b8878"></td>
					<td>#8B8878</td>
					<td bgcolor="#8b8682"></td>
					<td>#8B8682</td>
					<td bgcolor="#8b864e"></td>
					<td>#8B864E</td>
					<td bgcolor="#8b8386"></td>
					<td>#8B8386</td>
				</tr>
				<tr>
					<td bgcolor="#8b8378"></td>
					<td>#8B8378</td>
					<td bgcolor="#8b814c"></td>
					<td>#8B814C</td>
					<td bgcolor="#8b7e66"></td>
					<td>#8B7E66</td>
					<td bgcolor="#8b7d7b"></td>
					<td>#8B7D7B</td>
					<td bgcolor="#8b7d6b"></td>
					<td>#8B7D6B</td>
					<td bgcolor="#8b7b8b"></td>
					<td>#8B7B8B</td>
					<td bgcolor="#8b795e"></td>
					<td>#8B795E</td>
					<td bgcolor="#8b7765"></td>
					<td>#8B7765</td>
					<td bgcolor="#8b7500"></td>
					<td>#8B7500</td>
					<td bgcolor="#8b7355"></td>
					<td>#8B7355</td>
					<td bgcolor="#8b6969"></td>
					<td>#8B6969</td>
					<td bgcolor="#8b6914"></td>
					<td>#8B6914</td>
				</tr>
				<tr>
					<td bgcolor="#8b668b"></td>
					<td>#8B668B</td>
					<td bgcolor="#8b6508"></td>
					<td>#8B6508</td>
					<td bgcolor="#8b636c"></td>
					<td>#8B636C</td>
					<td bgcolor="#8b5f65"></td>
					<td>#8B5F65</td>
					<td bgcolor="#8b5a2b"></td>
					<td>#8B5A2B</td>
					<td bgcolor="#8b5a00"></td>
					<td>#8B5A00</td>
					<td bgcolor="#8b5742"></td>
					<td>#8B5742</td>
					<td bgcolor="#8b4c39"></td>
					<td>#8B4C39</td>
					<td bgcolor="#8b4789"></td>
					<td>#8B4789</td>
					<td bgcolor="#8b475d"></td>
					<td>#8B475D</td>
					<td bgcolor="#8b4726"></td>
					<td>#8B4726</td>
					<td bgcolor="#8b4513"></td>
					<td>#8B4513</td>
				</tr>
				<tr>
					<td bgcolor="#8b4500"></td>
					<td>#8B4500</td>
					<td bgcolor="#8b3e2f"></td>
					<td>#8B3E2F</td>
					<td bgcolor="#8b3a62"></td>
					<td>#8B3A62</td>
					<td bgcolor="#8b3a3a"></td>
					<td>#8B3A3A</td>
					<td bgcolor="#8b3626"></td>
					<td>#8B3626</td>
					<td bgcolor="#8b2500"></td>
					<td>#8B2500</td>
					<td bgcolor="#8b2323"></td>
					<td>#8B2323</td>
					<td bgcolor="#8b2252"></td>
					<td>#8B2252</td>
					<td bgcolor="#8b1c62"></td>
					<td>#8B1C62</td>
					<td bgcolor="#8b1a1a"></td>
					<td>#8B1A1A</td>
					<td bgcolor="#8b0a50"></td>
					<td>#8B0A50</td>
					<td bgcolor="#8b008b"></td>
					<td>#8B008B</td>
				</tr>
				<tr>
					<td bgcolor="#8b0000"></td>
					<td>#8B0000</td>
					<td bgcolor="#8a8a8a"></td>
					<td>#8A8A8A</td>
					<td bgcolor="#8a2be2"></td>
					<td>#8A2BE2</td>
					<td bgcolor="#8968cd"></td>
					<td>#8968CD</td>
					<td bgcolor="#87ceff"></td>
					<td>#87CEFF</td>
					<td bgcolor="#87cefa"></td>
					<td>#87CEFA</td>
					<td bgcolor="#87ceeb"></td>
					<td>#87CEEB</td>
					<td bgcolor="#878787"></td>
					<td>#878787</td>
					<td bgcolor="#858585"></td>
					<td>#858585</td>
					<td bgcolor="#848484"></td>
					<td>#848484</td>
					<td bgcolor="#8470ff"></td>
					<td>#8470FF</td>
					<td bgcolor="#838b8b"></td>
					<td>#838B8B</td>
				</tr>
				<tr>
					<td bgcolor="#838b83"></td>
					<td>#838B83</td>
					<td bgcolor="#836fff"></td>
					<td>#836FFF</td>
					<td bgcolor="#828282"></td>
					<td>#828282</td>
					<td bgcolor="#7fffd4"></td>
					<td>#7FFFD4</td>
					<td bgcolor="#7fff00"></td>
					<td>#7FFF00</td>
					<td bgcolor="#7f7f7f"></td>
					<td>#7F7F7F</td>
					<td bgcolor="#7ec0ee"></td>
					<td>#7EC0EE</td>
					<td bgcolor="#7d9ec0"></td>
					<td>#7D9EC0</td>
					<td bgcolor="#7d7d7d"></td>
					<td>#7D7D7D</td>
					<td bgcolor="#7d26cd"></td>
					<td>#7D26CD</td>
					<td bgcolor="#7cfc00"></td>
					<td>#7CFC00</td>
					<td bgcolor="#7ccd7c"></td>
					<td>#7CCD7C</td>
				</tr>
				<tr>
					<td bgcolor="#7b68ee"></td>
					<td>#7B68EE</td>
					<td bgcolor="#7ac5cd"></td>
					<td>#7AC5CD</td>
					<td bgcolor="#7a8b8b"></td>
					<td>#7A8B8B</td>
					<td bgcolor="#7a7a7a"></td>
					<td>#7A7A7A</td>
					<td bgcolor="#7a67ee"></td>
					<td>#7A67EE</td>
					<td bgcolor="#7a378b"></td>
					<td>#7A378B</td>
					<td bgcolor="#79cdcd"></td>
					<td>#79CDCD</td>
					<td bgcolor="#787878"></td>
					<td>#787878</td>
					<td bgcolor="#778899"></td>
					<td>#778899</td>
					<td bgcolor="#76eec6"></td>
					<td>#76EEC6</td>
					<td bgcolor="#76ee00"></td>
					<td>#76EE00</td>
					<td bgcolor="#757575"></td>
					<td>#757575</td>
				</tr>
				<tr>
					<td bgcolor="#737373"></td>
					<td>#737373</td>
					<td bgcolor="#71c671"></td>
					<td>#71C671</td>
					<td bgcolor="#7171c6"></td>
					<td>#7171C6</td>
					<td bgcolor="#708090"></td>
					<td>#708090</td>
					<td bgcolor="#707070"></td>
					<td>#707070</td>
					<td bgcolor="#6e8b3d"></td>
					<td>#6E8B3D</td>
					<td bgcolor="#6e7b8b"></td>
					<td>#6E7B8B</td>
					<td bgcolor="#6e6e6e"></td>
					<td>#6E6E6E</td>
					<td bgcolor="#6ca6cd"></td>
					<td>#6CA6CD</td>
					<td bgcolor="#6c7b8b"></td>
					<td>#6C7B8B</td>
					<td bgcolor="#6b8e23"></td>
					<td>#6B8E23</td>
					<td bgcolor="#6b6b6b"></td>
					<td>#6B6B6B</td>
				</tr>
				<tr>
					<td bgcolor="#6a5acd"></td>
					<td>#6A5ACD</td>
					<td bgcolor="#698b69"></td>
					<td>#698B69</td>
					<td bgcolor="#698b22"></td>
					<td>#698B22</td>
					<td bgcolor="#696969"></td>
					<td>#696969</td>
					<td bgcolor="#6959cd"></td>
					<td>#6959CD</td>
					<td bgcolor="#68838b"></td>
					<td>#68838B</td>
					<td bgcolor="#68228b"></td>
					<td>#68228B</td>
					<td bgcolor="#66cdaa"></td>
					<td>#66CDAA</td>
					<td bgcolor="#66cd00"></td>
					<td>#66CD00</td>
					<td bgcolor="#668b8b"></td>
					<td>#668B8B</td>
					<td bgcolor="#666666"></td>
					<td>#666666</td>
					<td bgcolor="#6495ed"></td>
					<td>#6495ED</td>
				</tr>
				<tr>
					<td bgcolor="#63b8ff"></td>
					<td>#63B8FF</td>
					<td bgcolor="#636363"></td>
					<td>#636363</td>
					<td bgcolor="#616161"></td>
					<td>#616161</td>
					<td bgcolor="#607b8b"></td>
					<td>#607B8B</td>
					<td bgcolor="#5f9ea0"></td>
					<td>#5F9EA0</td>
					<td bgcolor="#5e5e5e"></td>
					<td>#5E5E5E</td>
					<td bgcolor="#5d478b"></td>
					<td>#5D478B</td>
					<td bgcolor="#5cacee"></td>
					<td>#5CACEE</td>
					<td bgcolor="#5c5c5c"></td>
					<td>#5C5C5C</td>
					<td bgcolor="#5b5b5b"></td>
					<td>#5B5B5B</td>
					<td bgcolor="#595959"></td>
					<td>#595959</td>
					<td bgcolor="#575757"></td>
					<td>#575757</td>
				</tr>
				<tr>
					<td bgcolor="#556b2f"></td>
					<td>#556B2F</td>
					<td bgcolor="#555555"></td>
					<td>#555555</td>
					<td bgcolor="#551a8b"></td>
					<td>#551A8B</td>
					<td bgcolor="#54ff9f"></td>
					<td>#54FF9F</td>
					<td bgcolor="#548b54"></td>
					<td>#548B54</td>
					<td bgcolor="#545454"></td>
					<td>#545454</td>
					<td bgcolor="#53868b"></td>
					<td>#53868B</td>
					<td bgcolor="#528b8b"></td>
					<td>#528B8B</td>
					<td bgcolor="#525252"></td>
					<td>#525252</td>
					<td bgcolor="#515151"></td>
					<td>#515151</td>
					<td bgcolor="#4f94cd"></td>
					<td>#4F94CD</td>
					<td bgcolor="#4f4f4f"></td>
					<td>#4F4F4F</td>
				</tr>
				<tr>
					<td bgcolor="#4eee94"></td>
					<td>#4EEE94</td>
					<td bgcolor="#4d4d4d"></td>
					<td>#4D4D4D</td>
					<td bgcolor="#4b0082"></td>
					<td>#4B0082</td>
					<td bgcolor="#4a708b"></td>
					<td>#4A708B</td>
					<td bgcolor="#4a4a4a"></td>
					<td>#4A4A4A</td>
					<td bgcolor="#48d1cc"></td>
					<td>#48D1CC</td>
					<td bgcolor="#4876ff"></td>
					<td>#4876FF</td>
					<td bgcolor="#483d8b"></td>
					<td>#483D8B</td>
					<td bgcolor="#474747"></td>
					<td>#474747</td>
					<td bgcolor="#473c8b"></td>
					<td>#473C8B</td>
					<td bgcolor="#4682b4"></td>
					<td>#4682B4</td>
					<td bgcolor="#458b74"></td>
					<td>#458B74</td>
				</tr>
				<tr>
					<td bgcolor="#458b00"></td>
					<td>#458B00</td>
					<td bgcolor="#454545"></td>
					<td>#454545</td>
					<td bgcolor="#43cd80"></td>
					<td>#43CD80</td>
					<td bgcolor="#436eee"></td>
					<td>#436EEE</td>
					<td bgcolor="#424242"></td>
					<td>#424242</td>
					<td bgcolor="#4169e1"></td>
					<td>#4169E1</td>
					<td bgcolor="#40e0d0"></td>
					<td>#40E0D0</td>
					<td bgcolor="#404040"></td>
					<td>#404040</td>
					<td bgcolor="#3d3d3d"></td>
					<td>#3D3D3D</td>
					<td bgcolor="#3cb371"></td>
					<td>#3CB371</td>
					<td bgcolor="#3b3b3b"></td>
					<td>#3B3B3B</td>
					<td bgcolor="#3a5fcd"></td>
					<td>#3A5FCD</td>
				</tr>
				<tr>
					<td bgcolor="#388e8e"></td>
					<td>#388E8E</td>
					<td bgcolor="#383838"></td>
					<td>#383838</td>
					<td bgcolor="#36648b"></td>
					<td>#36648B</td>
					<td bgcolor="#363636"></td>
					<td>#363636</td>
					<td bgcolor="#333333"></td>
					<td>#333333</td>
					<td bgcolor="#32cd32"></td>
					<td>#32CD32</td>
					<td bgcolor="#303030"></td>
					<td>#303030</td>
					<td bgcolor="#2f4f4f"></td>
					<td>#2F4F4F</td>
					<td bgcolor="#2e8b57"></td>
					<td>#2E8B57</td>
					<td bgcolor="#2e2e2e"></td>
					<td>#2E2E2E</td>
					<td bgcolor="#2b2b2b"></td>
					<td>#2B2B2B</td>
					<td bgcolor="#292929"></td>
					<td>#292929</td>
				</tr>
				<tr>
					<td bgcolor="#282828"></td>
					<td>#282828</td>
					<td bgcolor="#27408b"></td>
					<td>#27408B</td>
					<td bgcolor="#262626"></td>
					<td>#262626</td>
					<td bgcolor="#242424"></td>
					<td>#242424</td>
					<td bgcolor="#228b22"></td>
					<td>#228B22</td>
					<td bgcolor="#218868"></td>
					<td>#218868</td>
					<td bgcolor="#212121"></td>
					<td>#212121</td>
					<td bgcolor="#20b2aa"></td>
					<td>#20B2AA</td>
					<td bgcolor="#1f1f1f"></td>
					<td>#1F1F1F</td>
					<td bgcolor="#1e90ff"></td>
					<td>#1E90FF</td>
					<td bgcolor="#1e1e1e"></td>
					<td>#1E1E1E</td>
					<td bgcolor="#1c86ee"></td>
					<td>#1C86EE</td>
				</tr>
				<tr>
					<td bgcolor="#1c1c1c"></td>
					<td>#1C1C1C</td>
					<td bgcolor="#1a1a1a"></td>
					<td>#1A1A1A</td>
					<td bgcolor="#191970"></td>
					<td>#191970</td>
					<td bgcolor="#1874cd"></td>
					<td>#1874CD</td>
					<td bgcolor="#171717"></td>
					<td>#171717</td>
					<td bgcolor="#141414"></td>
					<td>#141414</td>
					<td bgcolor="#121212"></td>
					<td>#121212</td>
					<td bgcolor="#104e8b"></td>
					<td>#104E8B</td>
					<td bgcolor="#0f0f0f"></td>
					<td>#0F0F0F</td>
					<td bgcolor="#0d0d0d"></td>
					<td>#0D0D0D</td>
					<td bgcolor="#0a0a0a"></td>
					<td>#0A0A0A</td>
					<td bgcolor="#080808"></td>
					<td>#080808</td>
				</tr>
				<tr>
					<td bgcolor="#050505"></td>
					<td>#050505</td>
					<td bgcolor="#030303"></td>
					<td>#030303</td>
					<td bgcolor="#00ffff"></td>
					<td>#00FFFF</td>
					<td bgcolor="#00ff7f"></td>
					<td>#00FF7F</td>
					<td bgcolor="#00ff00"></td>
					<td>#00FF00</td>
					<td bgcolor="#00fa9a"></td>
					<td>#00FA9A</td>
					<td bgcolor="#00f5ff"></td>
					<td>#00F5FF</td>
					<td bgcolor="#00eeee"></td>
					<td>#00EEEE</td>
					<td bgcolor="#00ee76"></td>
					<td>#00EE76</td>
					<td bgcolor="#00ee00"></td>
					<td>#00EE00</td>
					<td bgcolor="#00e5ee"></td>
					<td>#00E5EE</td>
					<td bgcolor="#00ced1"></td>
					<td>#00CED1</td>
				</tr>
				<tr>
					<td bgcolor="#00cdcd"></td>
					<td>#00CDCD</td>
					<td bgcolor="#00cd66"></td>
					<td>#00CD66</td>
					<td bgcolor="#00cd00"></td>
					<td>#00CD00</td>
					<td bgcolor="#00c5cd"></td>
					<td>#00C5CD</td>
					<td bgcolor="#00bfff"></td>
					<td>#00BFFF</td>
					<td bgcolor="#00b2ee"></td>
					<td>#00B2EE</td>
					<td bgcolor="#009acd"></td>
					<td>#009ACD</td>
					<td bgcolor="#008b8b"></td>
					<td>#008B8B</td>
					<td bgcolor="#008b45"></td>
					<td>#008B45</td>
					<td bgcolor="#008b00"></td>
					<td>#008B00</td>
					<td bgcolor="#00868b"></td>
					<td>#00868B</td>
					<td bgcolor="#00688b"></td>
					<td>#00688B</td>
				</tr>
				<tr>
					<td bgcolor="#006400"></td>
					<td>#006400</td>
					<td bgcolor="#0000ff"></td>
					<td>#0000FF</td>
					<td bgcolor="#0000ee"></td>
					<td>#0000EE</td>
					<td bgcolor="#0000cd"></td>
					<td>#0000CD</td>
					<td bgcolor="#0000aa"></td>
					<td>#0000AA</td>
					<td bgcolor="#00008b"></td>
					<td>#00008B</td>
					<td bgcolor="#000080"></td>
					<td>#000080</td>
					<td bgcolor="#000000"></td>
					<td>#000000</td>
				</tr>
			</tbody>
		</table>
	</div>
	
  </div>
  

  <!-- 动态创建消息弹框 -->
  <script type="text/javascript">
    class MessageBox {
      constructor(options) {
        // 把传递进来的配置信息挂载到实例上（以后可以基于实例在各个方法各个地方拿到这个信息）
        for(let key in options) {
          if(!options.hasOwnProperty(key)) break;
          this[key] = options[key];
        }
  
        // 开始执行
        this.init();
      }
      // 初始化：通过执行INIT控制逻辑的进行
      init() {
        if(this.status === "message") {
          this.createMessage();
          this.open();
          return;
        }
  
      }
      // 创建元素
      createMessage() {
        this.messageBox = document.createElement('div');
        this.messageBox.className = `dpn-message dpn-${this.type}`;
        this.messageBox.innerHTML = `
        ${this.message}
        <i class="dpn-close">X</i>
      `;
        document.body.appendChild(this.messageBox);
  
        // 基于事件委托监听关闭按钮的点击
        this.messageBox.onclick = ev => {
          let target = ev.target;
          //判断点击的元素是否为关闭按钮
          if(target.className === "dpn-close") {
            // 点击的是关闭按钮
            this.close();
          }
        };
  
        // 钩子函数
        this.oninit();
      }
  
      // 控制显示
      open() {
        if(this.status === "message") {
          let messageBoxs = document.querySelectorAll('.dpn-message'),
            len = messageBoxs.length;
          //计算新弹出的messageBox的Y轴偏移量
          this.messageBox.style.top = `${len===1 ? 20:20+(len-1)*70}px`;
  
          // 如果duration不为零，控制自动消失
          this.autoTimer = setTimeout(() => {
            this.close();
          }, this.duration);
  
          // 钩子函数
          this.onopen();
          return;
        }
      }
      // 控制隐藏
      close() {
        if(this.status === "message") {
          clearTimeout(this.autoTimer);
          this.messageBox.style.top = '-200px';
          let anonymous = () => {
            document.body.removeChild(this.messageBox);
            // 钩子函数
            this.onclose();
          };
          this.messageBox.addEventListener('transitionend', anonymous);
          return;
        }
  
      }
    }
  
    //全局对象上挂载该方法
    window.messageplugin = function(options = {}) {
      //允许只传入字符串，对其进行对象格式处理
      if(typeof options === "string") {
        options = {
          message: options
        };
      }
      //用户提供的配置覆盖默认配置项
      options = Object.assign({
        status: 'message',
        message: '我是默认信息',
        type: 'info',
        duration: 3000,
        //生命周期钩子
        oninit() {},
        onopen() {},
        onclose() {},
      }, options);
      return new MessageBox(options);
    };
  </script>
  
  <script>
    /*-------------------------------------------- 颜色转换 --------------------------------------------*/

	let rgbToHexColor = document.getElementById('rgbToHexColor');
    let hexToRgbColor = document.getElementById("hexToRgbColor");

    function rgbToHex(rgb) {
      //适配了中英文逗号
      var parsedRgb = /(\d{1,3})[\s,，]+(\d{1,3})[\s,，]+(\d{1,3})/g.exec(rgb);
      var r = parseInt(parsedRgb[1]);
      var g = parseInt(parsedRgb[2]);
      var b = parseInt(parsedRgb[3]);

      var hexR = ("0" + r.toString(16)).slice(-2);
      var hexG = ("0" + g.toString(16)).slice(-2);
      var hexB = ("0" + b.toString(16)).slice(-2);

      return "#" + hexR + hexG + hexB;
    }

    function hexToRgb(hex) {
      var parsedHex = /^#?([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})$/i.exec(hex);
      var r = parseInt(parsedHex[1], 16);
      var g = parseInt(parsedHex[2], 16);
      var b = parseInt(parsedHex[3], 16);

      if (parsedHex[1].length === 1) {
        r = r * 17;
        g = g * 17;
        b = b * 17;
      }
      return r + ", " + g + ", " + b;
    }

	// rgb转hex，将hex输入框的值设置为hex码，同时设置两个色块的颜色
    function convertRGBtoHEX() {
      var rgbInput = document.getElementById("rgbInput").value;
      var hexColor = rgbToHex(rgbInput);
      document.getElementById("rgbToHexColor").style.background = hexColor;
	  document.getElementById("hexToRgbColor").style.background = hexColor;
      document.getElementById("hexInput").value = hexColor;
    }

	// hex转rgb，将rgb输入框的值设置为rgb，同时设置两个色块的颜色
    function convertHEXtoRGB() {
      var hexInput = document.getElementById("hexInput").value;
      var rgbColor = hexToRgb(hexInput);
      document.getElementById("hexToRgbColor").style.background = "rgb(" + rgbColor + ")";
	  document.getElementById("rgbToHexColor").style.background = "rgb(" + rgbColor + ")";
      document.getElementById("rgbInput").value = "rgb(" + rgbColor + ")";
    }

	// 单击色块时，复制颜色码（rgb转hex色块的复制hex码）
    rgbToHexColor.onclick = function(e){
		let rgb = e.target.style.backgroundColor;
		if(rgb){
			let hex = rgbToHex(rgb);
			// 执行复制
			navigator.clipboard.writeText(hex).then(function() {
				messageplugin({
					message: "复制成功，"+hex,
					type: "success"
				});
			}).catch(function(error) {
				console.error('无法复制文本：', error);
			});
		}
    }

	// 单击色块时，复制颜色码（hex转rgb色块的复制rgb码）
    hexToRgbColor.onclick = function(e){
		let rgb = e.target.style.backgroundColor;
		if(rgb){
			// 执行复制
			navigator.clipboard.writeText(rgb).then(function() {
				messageplugin({
					message: "复制成功，"+rgb,
					type: "success"
				});
			}).catch(function(error) {
				console.error('无法复制文本：', error);
			});
		}
    }

    /*-------------------------------------------- 颜色选择 --------------------------------------------*/

    let colorUl=document.getElementById('color-ur');
    let colorPicker = document.getElementById("colorPicker");
    let colorInputRgb = document.getElementById("colorInputRgb");
    let colorInputHex = document.getElementById("colorInputHex");
    let 颜色大全 = document.getElementById("颜色大全");

    /*-------------------------------------------- 颜色大全 --------------------------------------------*/
    let colorArr = [
      "#000000","#434343","#ffffff","#980000","#ff0000","#ff9900","#ffff00","#DDD23B","#CA7A2C","#BEC23F",
      "#00ff00","#00ffff","#4a86e8","#0000ff","#9900ff","#ff00ff","#e6b8af","#f4cccc","#fce5cd","#fff2cc",
      "#d9ead3","#d0e0e3","#c9daf8","#cfe2f3","#d9d2e9","#ead1dc","#dd7e6b","#ea9999","#f9cb9c","#ffe599",
      "#b6d7a8","#a2c4c9","#a4c2f4","#9fc5e8","#b4a7d6","#d5a6bd","#cc4125","#e06666","#f6b26b","#ffd966",
      "#93c47d","#76a5af","#6d9eeb","#6fa8dc","#8e7cc3","#c27ba0","#a61c00","#cc0000","#e69138","#f1c232",
      "#6aa84f","#45818e","#3c78d8","#3d85c6","#674ea7","#a64d79","#660000","#7f6000","#274e13","#0c343d",
      "#1c4587","#073763","#20124d","#68768a","#1e90ff","#00bfff","#C7802D","#48c0a4","#549688","#69b0ac",
      "#91ad70","#7398Ab","#b4caa0","#5dac81","#376b6d","#91b493","#68b4b0","#1B813E","#3d6167","#005CAF",
      "#2D6D4B","#24936E","#00AA90","#86c166","#838A2D","#90B44B","#66BAB7","#268785","#70B9DE","#33A6B8",
      "#1E88A8","#008947","#2EA9DF","#F8C3CD","#E16B8C","#DC9FB4","#F4A7B9","#B5495B","#E87A90","#D05A6E",
      "#DB4D6D","#D0104C","#EB7A77","#CB4042","#AB3B3A","#994639","#F19483","#B54434","#F17C67","#E83015",
      "#F75C2F","#F05E1C","#ED784A","#FB9966","#D75455","#9F353A","#E3916E","#C73E3A","#C46243","#E8B647",
      "#F6C555","#FBE251","#FFB11B","#FC9F4D","#FAD689","#FFC408","#F9BF45","#E9CD4C","#EFBB24","#D9AB42"
    ];

    // 动态添加li
    function iniColorPicker(){
      let html = '';
      let self = this;
      for(let i=0;i<colorArr.length;i++){
        html+= '<li  style="background:'+
        colorArr[i]+'">&nbsp;</li>';
      }
      colorUl.innerHTML=html;
    }
    iniColorPicker();

    // 颜色选择器中选择颜色时，将颜色值设置到input文本框中
    function updateColorPicker() {
      let hex = colorPicker.value;
      let rgb = hexToRgb(hex);
      colorInputRgb.value = "rgb(" + rgb + ")";
      colorInputHex.value = hex;
    }

    // 当rgb框输入了颜色值时，设置颜色选择器的值
    function updateColorInputRgb() {
      let rgb = colorInputRgb.value;
      let hex = rgbToHex(rgb);
      colorPicker.value = hex;
      colorPicker.style.backgroundColor = hex;
      colorInputHex.value = hex;
    }

    // 当hex框输入了颜色值时，设置颜色选择器的值
    function updateColorInputHex() {
      let hex = colorInputHex.value;
      let rgb = hexToRgb(hex);
      hex = rgbToHex(rgb);
      colorPicker.value = hex;
      colorPicker.style.backgroundColor = hex;
      colorInputRgb.value = "rgb(" + rgb + ")";
    }

    // 单击常用颜色时，设置颜色选择器的值、input文本框的值
    colorUl.onclick = function(e){
      if(e.target.tagName.toLowerCase() === 'li'){
        let rgb = e.target.style.backgroundColor;
        let hex = rgbToHex(rgb);
        colorInputRgb.value = rgb;
        colorInputHex.value = hex;
        colorPicker.value = hex;
        colorPicker.style.backgroundColor = hex;
        // 执行复制
        navigator.clipboard.writeText(hex).then(function() {
          messageplugin({
            message: "复制成功，"+hex,
            type: "success"
          });
        }).catch(function(error) {
          console.error('无法复制文本：', error);
        });
      }
    }

	// 单击表格的td元素时，复制元素的hex值
	颜色大全.onclick = function(e){
      if(e.target.tagName.toLowerCase() === 'td'){
		var td = e.target;
		// 获取色块td的bgcolor属性的值
		var hex = td.getAttribute('bgcolor');
		if(hex === null){ // 如果值为null，说明单击的不是色块td，而是文字td
			hex = td.innerHTML; // 则直接获取文字td的innerHTML
		}
        // 执行复制
        navigator.clipboard.writeText(hex).then(function() {
          messageplugin({
            message: "复制成功，"+hex,
            type: "success"
          });
        }).catch(function(error) {
          console.error('无法复制文本：', error);
        });
      }
    }

  </script>
</body>
</html>